<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p>
        用户名：
        <input type="text" id="username">
        <!-- 用户名必须是由数字，字母组成，且数字不能开头，且长度是4-8位 -->
        <span id="userSpan"></span>
    </p>
    <p>
        输入密码：
        <input type="password" id="password">
        <!-- 用户名必须是由数字，字母组成，且长度是4- , 验证密码的强度 -->
        <!-- 如果都是数字或者都是小写或者都是大写 -> 弱 -->
        <!-- 如果只有其中两种 -> 中 -->
        <!-- 如果既有小写，也有数字，也有大写 -> 强 -->
        <span id="pwdSpan"></span>
    </p>
    <p>
        确认密码：
        <input type="password" id="confirmPwd">
        <span id="confirmPwdSpan"></span>
    </p>
    <p>
        验证码：<input type="text">
        <span id="showCode">a2Q2d4</span>
        <button id="refresh">刷新</button>
        <span id="codeSpan"></span>
    </p>
    <p>
        <input type="button" id="btn" value="注册">
    </p>

    
    <script>

        // 表单注册不写 form   form 会刷新页面     后面使用ajax提交

        var oBtn = getEle('btn') ;
        var oUser = getEle('username') ;
        var oUserSpan = getEle('userSpan') ;

        var oPwd = getEle('password') ;
        var oPwdSpan = getEle('pwdSpan') ;

        var numArr = [] ;
        for(var i = 0 ; i < 10 ; i++) {
            numArr.push(i + '') ;
        }

        var smallArr = [] ;
        for(var i = 97 ; i <= 122 ; i++) {
            smallArr.push(String.fromCharCode(i)) ;
        }

        var bigArr = [] ;
        for(var i = 65 ; i <= 90 ; i++) {
            bigArr.push(String.fromCharCode(i)) ;
        }

        var allArr = numArr.concat(smallArr , bigArr) ;



        oBtn.onclick = function() {
            // 验证用户名
            var user = oUser.value ;
            // 为空
            if(user === '') {
                oUserSpan.innerHTML = '亲，输入不能为空' ;
                oUserSpan.style.color = 'red' ;
                return ;
            }
            // 长度4-8
            if(user.length < 4 || user.length > 8) {
                oUserSpan.innerHTML = '长度必须是4-8位' ;
                oUserSpan.style.color = 'red' ;
                return ;
            }
            // 数字开头   第一个字符是不是数字
            // if(user[0] >= 0 && user[0] <= 9)
            // if(numArr.includes(user[0]) === true) {}
            if(!isNaN(user[0])) {
                oUserSpan.innerHTML = '数字不能开头' ;
                oUserSpan.style.color = 'red' ;
                return ;
            }
            // 只能由数字，字母组成 
            // 遍历用户名
            for(var i in user) {
                if(allArr.includes(user[i]) === false) {
                    oUserSpan.innerHTML = '只能由数字和字母组成' ;
                    oUserSpan.style.color = 'red' ;
                    return ;
                }
            }
            oUserSpan.innerHTML = '√' ;
            oUserSpan.style.color = 'green' ;



            // 密码验证
            var pwd = oPwd.value ;
            // 为空  。。。
            // 长度  。。。
            // 非法字符 。。。

            // 密码强度 
            // 分析   a12Q3
            //    遍历密码    看一下有没有数字
            //    遍历密码    看一下有没有小写
            //    遍历密码    看一下有没有大写
            var flag1 = 0 ;
            var flag2 = 0 ;
            var flag3 = 0 ;
            // for(var i in pwd) {
            //     if(numArr.includes(pwd[i])) {
            //         // flag1++ ;
            //         flag1 = 1 ;
            //         break ;
            //     }
            // }
            // for(var i in pwd) {
            //     if(smallArr.includes(pwd[i])) {
            //         // flag1++ ;
            //         flag2 = 1 ;
            //         break ;
            //     }
            // }
            // for(var i in pwd) {
            //     if(bigArr.includes(pwd[i])) {
            //         // flag1++ ;
            //         flag3 = 1 ;
            //         break ;
            //     }
            // }

            // a2sQ2
            for(var i in pwd) {
                if(numArr.includes(pwd[i])) {
                    flag1 = 1 ;
                    continue ;
                    
                }
                if(smallArr.includes(pwd[i])) {
                    flag2 = 1 ;
                    continue ;
                }
                if(bigArr.includes(pwd[i])) {
                    flag3 = 1 ;
                    
                }
            }

            var flag = flag1 + flag2 + flag3 ;
            if(flag === 1) {
                // 弱
                oPwdSpan.innerHTML = '弱' ;
                oPwdSpan.style.color = 'red' ;
                // return ;
            } 
            if(flag === 2) {
                oPwdSpan.innerHTML = '中' ;
                oPwdSpan.style.color = 'yellow' ;
                // 中
                // return 
            }
            
            oPwdSpan.innerHTML = '强' ;
            oPwdSpan.style.color = 'green' ;
            
        }


        function msgSpan(obj , msg , color) {  
            obj.innerHTML = msg ;
            obj.style.color = color ;
        }


        function getEle(id) {  
            return document.getElementById(id) ;
        }

    </script>
    
</body>
</html>